import { useLocation,useNavigate } from "react-router-dom";
import { Button, Col, Form, Input, PageHeader, Radio, Row, Space,Checkbox, Select } from "antd";
import sceneAdd from "./sceneAdd.scss";
import { useState } from "react";
const {TextArea} = Input;
const traverse = (arr) => {
    let selectList = [];
    arr.map((v, i) =>
      selectList.push(
        <Select.Option value={v} key={i}>
          {v}
        </Select.Option>
      )
    );
    return selectList;
  };
const SceneAdd = () => {
  const location = useLocation();
  const { state } = location;
  console.log(state, location);
  const navigate =useNavigate();
  const [value, setValue] = useState("");

  const statusClass = ["白金会员", "黄金会员", "铂金会员", "钛金会员","超级会员"];
  const date = ["一天","两天","三天","五天","今天"]
  const plainOptions = ['微信商城','线下店铺','App商城']
  
  const routes = [
    {
      path: "index",
      breadcrumbName: "营销管理",
    },
    {
      path: "first",
      breadcrumbName: "场景营销",
    },
    {
      path: "second",
      breadcrumbName: "新建生日活动",
    },
  ];
  const onChange = (e) => {
    console.log("radio checked", e.target.value);
    setValue(e.target.value);
  };
  const onCheckChange = (checkedValues) => {
    console.log('checked = ', checkedValues);
  };
  return (
    <div className="SceneAdd" style={sceneAdd}>
      <div className="sceneAddHead">
        <PageHeader
          className="site-page-header"
          title="新建生日活动"
          breadcrumb={{
            routes,
          }}
        />
      </div>
      <div className="sceneAddMain">
        <h3>基础信息</h3>
        <Row>
          <Col span={6}></Col>
          <Col span={12}>
            <Form>
              <Form.Item label="活动名称">
                <Input placeholder="请输入名称"></Input>
              </Form.Item>
              <Form.Item label="活动名称">
                <Radio.Group onChange={onChange} value={value}>
                  <Space direction="vertical">
                    <Radio value="生日当天">生日当天</Radio>
                    <Radio value="生日当周">生日当周</Radio>
                    <Radio value="生日当月">生日当月</Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="活动渠道">
                <Checkbox.Group options={plainOptions} onChange={onCheckChange} />
              </Form.Item>
              <Form.Item label="活动人群">
                <Radio.Group onChange={onChange} value={value}>
                  <Space direction="vertical">
                    <Radio value="全部会员">全部会员</Radio>
                    <Radio value="会员等级">会员等级<Select size="small" placeholder="请选择" style={{width:120}}>{traverse(statusClass)}</Select>及以上可领取</Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="活动规则">
                <Checkbox.Group onChange={onCheckChange} >
                    <Row style={{marginBottom:8}}>
                        <Checkbox value="消费折扣">
                            消费折扣<Input addonAfter="折" placeholder="请输入" style={{width:120}} size="small"></Input>           
                        </Checkbox>
                    </Row>
                    <Row>
                        <Checkbox value="积分加倍">
                            积分加倍<Input addonAfter="倍" placeholder="请输入" style={{width:120}} size="small"></Input>           
                        </Checkbox>
                    </Row>
                    <Row>
                        <Checkbox value="优惠券">
                            赠送优惠券
                            <Button type="link">选择优惠券</Button>      
                        </Checkbox>
                    </Row>
                    <Row>
                        <Checkbox value="包邮">
                            包邮
                        </Checkbox>
                    </Row>
                </Checkbox.Group>
              </Form.Item>
              <Form.Item label="通知渠道">
                <Checkbox.Group onChange={onCheckChange} value={value}>
                    <Checkbox value={"短信"}>短信</Checkbox>
                    <Checkbox value={"商城信息推送"}>商城信息推送</Checkbox>
                </Checkbox.Group>
              </Form.Item>
              <Form.Item label="通知时间">
                <Radio.Group onChange={onChange} value={value}>
                    <Space direction="vertical">
                    <Radio value="不提醒">不提醒</Radio>
                    <Radio value="提醒">距离活动结束前<Select style={{width:120}} placeholder="请选择">{traverse(date)}</Select>提醒</Radio>
                    </Space>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="通知模板">
                <TextArea style={{width:400}} rows={5} placeholder="请输入"></TextArea>
              </Form.Item>
              <Form.Item>
                <Row>
                  <Col span={8}></Col>
                  <Col span={8}>
                    <Button type="primary" className="Btn">提交</Button>
                    <Button onClick={()=>{navigate(-1)}}>返回</Button>
                  </Col>
                  <Col span={8}></Col>
                </Row>
              </Form.Item>
            </Form>
          </Col>
          <Col span={6}></Col>
        </Row>
      </div>
    </div>
  );
};

export default SceneAdd;
